<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>学生数据列表</title>
    <!-- 引入CSS文件，用于设置表格的样式 -->
    <style>
        /* 设置表格的宽度为100%，并合并单元格的边框 */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* 设置表头和表体的单元格的边框为1px的实线，黑色 */
        th,
        td {
            border: 1px solid black;
        }

        /* 设置表头的单元格的背景色为灰色，字体加粗，居中对齐 */
        thead th {
            background-color: gray;
            font-weight: bold;
            text-align: center;
        }

        /* 设置表体的单元格的高度为30px，左对齐 */
        tbody td {
            height: 30px;
            text-align: left;
        }
    </style>
</head>

<body>
    <!-- 创建一个空的表格，用于显示学生数据列表 -->
    <table id="student-table">
        <!-- 表头部分，用于显示列名 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>专业</th>
                <th>年级</th>
            </tr>
        </thead>
        <!-- 表体部分，用于显示数据行 -->
        <tbody id="student-body">
            <!-- 这里将通过JavaScript动态添加数据行 -->
        </tbody>
    </table>
    <form id="student-form">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age" required>
        <label for="major">专业：</label>
        <input type="text" id="major" name="major" required>
        <label for="grade">年级：</label>
        <input type="number" id="grade" name="grade" required>
        <button type="submit" id="add">添加</button>
        <!-- 在表格的每一行中添加一个修改按钮，用于触发修改功能 -->
        <td><button class="edit">修改</button></td>
        <!-- 在表格的每一行中添加一个删除按钮，用于触发删除功能 -->
        <td><button class="delete">删除</button></td>
        z

    </form>

    <!-- 引入JavaScript文件，用于发送XMLHttpRequest请求 -->
    <script>
        // 获取表单元素的引用
        var studentForm = document.getElementById("student-form");

        // 为表单添加一个事件监听器，当用户提交表单时执行
        studentForm.addEventListener("submit", function (event) {
            // 阻止表单的默认行为（刷新页面）
            event.preventDefault();
            // 获取用户输入的数据
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var major = document.getElementById("major").value;
            var grade = document.getElementById("grade").value;
            // 创建一个学生对象，用于发送请求
            var student = {
                name: name,
                age: age,
                major: major,
                grade: grade
            };
            // 创建一个XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 设置请求的方法为POST，URL为http://localhost:3000/students
            xhr.open("POST", "http://localhost:3000/students");
            // 设置请求的响应类型为JSON
            xhr.responseType = "json";
            // 设置请求的数据类型为JSON
            xhr.setRequestHeader("Content-Type", "application/json");
            // 设置请求状态变化的回调函数
            xhr.onreadystatechange = function () {
                // 判断请求是否完成（readyState为4）并且成功（status为201）
                if (xhr.readyState == 4 && xhr.status == 201) {
                    // 获取响应数据，这是一个包含新增的学生对象的数据
                    var response = xhr.response;
                    // 在控制台打印响应数据，或者执行其他操作
                    console.log(response);
                }
            };
            // 发送请求，请求的数据为学生对象的JSON字符串
            xhr.send(JSON.stringify(student));
        });
        // 获取表格元素的引用
        var studentTable = document.getElementById("student-table");

        // 为表格添加一个事件监听器，当用户点击修改按钮时执行
        studentTable.addEventListener("click", function (event) {
            // 判断点击的元素是否是修改按钮
            if (event.target.classList.contains("edit")) {
                // 获取该行的数据
                var tr = event.target.parentNode.parentNode;
                var name = tr.children[0].textContent;
                var age = tr.children[1].textContent;
                var major = tr.children[2].textContent;
                var grade = tr.children[3].textContent;
                // 获取该行的id
                var id = tr.getAttribute("data-id");
                // 将数据填充到表单中
                document.getElementById("name").value = name;
                document.getElementById("age").value = age;
                document.getElementById("major").value = major;
                document.getElementById("grade").value = grade;
                // 将提交按钮的文本改为“修改”
                document.getElementById("add").textContent = "修改";
                // 为提交按钮添加一个自定义属性，用于存储id
                document.getElementById("add").setAttribute("data-id", id);
            }
        });

        // 为表单添加一个事件监听器，当用户提交表单时执行
        studentForm.addEventListener("submit", function (event) {
            // 阻止表单的默认行为（刷新页面）
            event.preventDefault();
            // 获取用户输入的数据
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var major = document.getElementById("major").value;
            var grade = document.getElementById("grade").value;
            // 创建一个学生对象，用于发送请求
            var student = {
                name: name,
                age: age,
                major: major,
                grade: grade
            };
            // 获取提交按钮的id属性，如果存在，说明是修改操作，否则是新增操作
            var id = document.getElementById("add").getAttribute("data-id");
            // 创建一个XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 判断是修改操作还是新增操作
            if (id) {
                // 设置请求的方法为PUT，URL为http://localhost:3000/students/加上id
                xhr.open("PUT", "http://localhost:3000/students/" + id);
            } else {
                // 设置请求的方法为POST，URL为http://localhost:3000/students
                xhr.open("POST", "http://localhost:3000/students");
            }
            // 设置请求的响应类型为JSON
            xhr.responseType = "json";
            // 设置请求的数据类型为JSON
            xhr.setRequestHeader("Content-Type", "application/json");
            // 设置请求状态变化的回调函数
            xhr.onreadystatechange = function () {
                // 判断请求是否完成（readyState为4）并且成功（status为200或201）
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 201)) {
                    // 获取响应数据，这是一个包含修改或新增的学生对象的数据
                    var response = xhr.response;
                    // 在控制台打印响应数据，或者执行其他操作
                    console.log(response);
                }
            };
            // 发送请求，请求的数据为学生对象的JSON字符串
            xhr.send(JSON.stringify(student));
        });
        // 获取表单元素的引用
        var studentForm = document.getElementById("student-form");

        // 为表单添加一个事件监听器，当用户提交表单时执行
        studentForm.addEventListener("submit", function (event) {
            // 阻止表单的默认行为（刷新页面）
            event.preventDefault();
            // 获取用户输入的数据
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var major = document.getElementById("major").value;
            var grade = document.getElementById("grade").value;
            // 创建一个学生对象，用于发送请求
            var student = {
                name: name,
                age: age,
                major: major,
                grade: grade
            };
            // 创建一个XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 设置请求的方法为POST，URL为http://localhost:3000/students
            xhr.open("POST", "http://localhost:3000/students");
            // 设置请求的响应类型为JSON
            xhr.responseType = "json";
            // 设置请求的数据类型为JSON
            xhr.setRequestHeader("Content-Type", "application/json");
            // 设置请求状态变化的回调函数
            xhr.onreadystatechange = function () {
                // 判断请求是否完成（readyState为4）并且成功（status为201）
                if (xhr.readyState == 4 && xhr.status == 201) {
                    // 获取响应数据，这是一个包含新增的学生对象的数据
                    var response = xhr.response;
                    // 在控制台打印响应数据，或者执行其他操作
                    console.log(response);
                }
            };
            // 发送请求，请求的数据为学生对象的JSON字符串
            xhr.send(JSON.stringify(student));
        });


        // 获取表格元素的引用
        var studentTable = document.getElementById("student-table");

        // 为表格添加一个事件监听器，当用户点击删除按钮时执行
        studentTable.addEventListener("click", function (event) {
            // 判断点击的元素是否是删除按钮
            if (event.target.classList.contains("delete")) {
                // 获取该行的id
                var tr = event.target.parentNode.parentNode;
                var studentId = tr.dataset.id; // 假设你的每一行有一个data-id属性用于存储学生的ID
                // 创建一个XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                // 设置请求的方法为DELETE，URL为http://localhost:3000/students/:id
                xhr.open("DELETE", "http://localhost:3000/students/" + studentId);
                // 设置请求状态变化的回调函数
                xhr.onreadystatechange = function () {
                    // 判断请求是否完成（readyState为4）并且成功（status为204，表示成功删除）
                    if (xhr.readyState == 4 && xhr.status == 204) {
                        // 在控制台打印删除成功的消息，或者执行其他操作
                        console.log("学生删除成功");
                        // 从表格中移除该行
                        tr.remove();
                    }
                };
                // 发送删除请求
                xhr.send();
            }
        });

    </script>
</body>

</html>